<template>
	<view class="main">
		<view v-if="plan" class="header-index display-flex-column shadow">
			<view class="display-flex display-flex-align-center">
				<view class="odl line-sn">{{plan.lineSn}}</view>
				<text class="text-ellipsis odl">{{plan.origin}}</text>
				<image src="../../../static/images/bus/arrow_grey.png" class="arrow" mode=""></image>
				<text class="text-ellipsis odl">{{plan.destination}}</text>
			</view>
			<view class="display-flex display-flex-align-center sd">
				<view class="" style="margin-right: 8px;">运营时间 {{plan.datDesc}} {{plan.dpTime}}</view>
				<view >全程 {{plan.distance}}km</view>
			</view>
			<view class="black-bg display-flex display-flex-align-center">
				<view class="display-flex-column display-flex-align-center" style="margin-left: 30px;">
					<text class="s-title">当前时间</text>
					<text class="ti-font">{{time}}</text>
				</view>
				<view class="display-flex-column display-flex-align-center"  style="margin-right: 30px;">
					<text class="s-title">验证码</text>
					<text  class="ti-font">{{plan.verifyCode}}</text>
				</view>
			</view>
		</view>
		<view class="" style="margin-bottom: 65px;">
			<scroll-view :scroll-y="true">
				<view v-for="(item,index) in plan.lineStations" :key="index" class="display-flex display-flex-align-center st-item">
					<view class="dp-time">
						{{item.departureTime}}
					</view>
					<view class="dot station_dot_start" style="margin-right: 13px;margin-left: 11px;"></view>
					<view class="display-flex-column ">
						<view class="station">
							{{item.stopName}}
						</view>
						<view class="on-num" >
							<text :style="'color:'+(item.onNum==0?'#686868':'#ff0000')">{{item.on_num}}</text>人上
						</view>
					</view>
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	import { planDetail } from '@/api/bus.js';

export default {
	computed: mapGetters(['isLogin', 'uid']),
	
	components:{
	},
	data() {
		return {
			planId: '',
			plan: '',
			time: '',
			date: '',
			week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
			timestamp: Date.parse(new Date())/1000,
			isStartShow: false,
			content: '确定开始行程吗？',
			confirmText: '开始行程',
			confirmColor: '#f55850',
			cancelColor: '#39B54A',
		};
	},
	onShow() {
		var that = this
		var timerID = setInterval(function() {
			that.updateTime()
		}, 1000);
		that.updateTime()
	},
	onReady() {

		
	},

	onLoad(options) {
		this.planId = options.plan_id
		this.initPlanDetail()
	},
	methods: {
		
		
		
		initPlanDetail(){
			var that = this;
			uni.showLoading({
				title: '加载中'
			})
			planDetail({plan_id: this.planId}).then(res => {
				 that.plan = res.data
				uni.hideLoading()
			}).catch(err => {
				this.$u.toast(err)
				uni.hideLoading()
			})
		},
		updateTime: function() {
			var cd = new Date();
			// this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2),
			this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2),
			this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
		    this.timestamp = Date.parse(new Date())/1000
		
		},
		zeroPadding(num, digit) {
			var zero = '';
			for (var i = 0; i < digit; i++) {
				zero += '0';
			}
			return (zero + num).slice(-digit);
		},
	}
};
</script>

<style lang="scss" scoped>
	.header-index{
		margin-bottom: 10px;
		padding: 8px;
	}
	.line-sn{
		width: 125px;
		margin-right: 5px;
	}
	.arrow{
		width: 15px; 
		height: 7px;
		margin: 0 5px;
	}
	.odl{
		color: #000000;
		font-weight: 700;
	}
	.sd{
		margin: 8px 0;
		color: #838383;
	}
	.black-bg{
		color: #FFFFFF;
		border-radius: 5px;
		background-color: #161313;
		justify-content: space-between;
	}
	.s-title{
		margin: 8px 0;
		font-size: 16px;
	}
	.ti-font{
		margin-bottom: 10px;
		font-size: 34px;
		font-weight: 700;
	}
	.st-item{
		margin: 25px 0;
	}
	.dp-time{
		font-size: 30px;
		color: #000;
		font-weight: 600;
		margin-left: 12px;
	}
	.station{
		color: #000000;
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 8px;
	}
	.on-num{
		color: #686868;
		font-size: 16px;
		font-weight: 700;
	}
	.verity{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.end-trip{
		height: 65px;
		line-height: 65px;
		background-color: #FF5D3C;
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
	}
	.start-trip{
		height: 65px;
		line-height: 65px;
		background-color: #00e200;
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
	}
</style>
